<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <th:block th:include="common/head::head"/>
    <style type="text/css">

        .echarts {
            margin: 20px auto;
            width: 97%;
            height: 400px;
        }

        .choose {
            color: #009688;
            border: 1px #009688 solid !important;
        }

        .export {
            position: absolute;
            right: 3%;
            z-index: 990;
        }

    </style>
    <script th:src="@{${session.jpomProxyPath}+'/static/js/echarts.min.js?v='+${session.staticCacheTime}}"></script>
</head>

<body>
<div style="position: relative">
    <form class="layui-form" action="">
        <div class="layui-form-item" style="margin-bottom: 0;">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto !important;">时间</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" readonly class="layui-input" id="time" placeholder="请选择时间范围">
                </div>
            </div>
        </div>
    </form>
    <div class="export">
        <div id="exportData" style="color: #FFFFFF;width: 1px;height: 1px"></div>
        <button class="layui-icon layui-icon-export" id="exportBtn" title="导出监控数据"
                style="font-size: 18px"></button>
    </div>
    <div class="echarts" id="echarts"></div>
</div>
</body>

<script type="text/javascript">
    var myEcharts;
    var time = '';

    function loadSuccess() {
        loadTop('');

        layui.use(['laydate'], function () {
            var laydate = layui.laydate;
            var now = new Date().getTime();
            laydate.render({
                elem: '#time',
                type: 'datetime',
                range: "~",
                max: now,
                done: function (value, date, endDate) {
                    time = value;
                    loadTop(value);
                }
            });
        });

        $("#exportBtn").click(function () {
            window.open(appendNodeId('./exportTop?time=' + time));
        });
    }

    function loadTop(time) {
        loadingAjax({
            url: './nodeMonitor_data.json',
            data: {
                time: time
            },
            success: function (data) {
                if (200 === data.code && data.data) {
                    loadEchartsData(data.data);
                }
                if (data.code !== 200) {
                    layer.msg(data.msg);
                }
            }
        });
    }

    function loadEchartsData(data) {
        let series = data.series;
        let cpuItem = {
            name: 'cpu占用',
            type: 'line',
            data: [],
            showSymbol: false,
            //设置折线为曲线
            smooth: true
        };
        let diskItem = {
            name: '磁盘占用',
            type: 'line',
            data: [],
            showSymbol: false,
            smooth: true
        };
        let memoryItem = {
            name: '内存占用',
            type: 'line',
            data: [],
            showSymbol: false,
            smooth: true
        };
        for (let i = 0; i < series.length; i++) {
            let item = series[i];
            cpuItem.data.push(parseFloat(item.cpu));
            diskItem.data.push(parseFloat(item.disk));
            memoryItem.data.push(parseFloat(item.memory));
        }
        let array = [cpuItem, memoryItem, diskItem];
        loadEcharts(data.scales, array);
    }

    //加载监控图
    function loadEcharts(xAxis, series) {
        if (!series) {
            return;
        }
        let option = {
            title: {
                text: '系统监控'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['cpu占用', '内存占用', '磁盘占用']
            },
            grid: {
                left: '1%',
                right: '2%',
                bottom: '1%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            calculable: true,
            yAxis: {
                type: 'value',
                axisLabel: {
                    //设置y轴数值为%
                    formatter: '{value} %'
                },
                max: 100
            },
            series: series
        };
        try {
            if (!myEcharts) {
                myEcharts = echarts.init(document.getElementById('echarts'));
            }
            myEcharts.setOption(option);
        } catch (e) {
            console.error(e);
        }
    }
</script>

</html>